<template>
  <el-card>
    <div>
      <div class="charts" ref="charts"></div>
    </div>
  </el-card>
</template>

<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      value: "全部渠道",
      dataList: [
        36, 52, 78, 85, 68, 72, 88, 64, 92, 90, 46, 62, 62, 85, 68, 100, 132,
        146, 200, 180, 136, 76, 89, 78, 85, 68, 65, 54, 40, 45, 38,
      ],
    };
  },
  mounted() {
    //折线图
    let mychart = echarts.init(this.$refs.charts);
    mychart.setOption({
      backgroundColor: "#fff",
      title: {
        text: "月新增文章数",
        fontSize: 18,
        color: "#464646",
        fontWeight: 700,

        // textStyle: {
        //   rich: {
        //     a: {
        //       fontSize: 18,
        //       color: "#464646",
        //       fontWeight: 700,
        //     },
        //   },
        // },
        // textAlign: "center",
        left: "center",
        top: "3%",
        // left: "2%",
      },
      color: "#ff8800",
      legend: {
        data: ["新增文章"],
        align: "right",
        right: 400,
        top: 10,
        textStyle: {
          color: "#000",
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 35,
      },
      toolbox: {
        show: true,
        feature: {
          dataView: {
            readOnly: false,
          },
          magicType: {
            type: ["line", "bar"],
          },
          restore: {},
          saveAsImage: {},
        },
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: "#fff",
        textStyle: {
          color: "#333",
          fontSize: 14,
        },
        axisPointer: {
          type: "line",
          lineStyle: {
            type: "dashed", //  默认是实线类型
          },
        },
        // formatter: function (parms) {
        //   // var str=  parms.data.data +"</br>"+
        //   //   parms.data.legendname + parms.data.value + "</br>";
        //   var str = parms.marker + parms.title + "</br>";
        //   return str;
        // },
      },

      grid: {
        top: "18%",
        left: "8%",
        right: "5%",
        bottom: "10%",
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          axisLine: {
            show: true,
          },
          splitArea: {
            // show: true,
            color: "#f00",
            lineStyle: {
              color: "#f00",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            margin: 10,
          },
          boundaryGap: false,
          data: [
            "2023-03-13",
            "2023-03-14",
            "2023-03-15",
            "2023-03-16",
            "2023-03-17",
            "2023-03-18",
            "2023-03-19",
            "2023-03-20",
            "2023-03-21",
            "2023-03-22",
            "2023-03-23",
            "2023-03-24",
            "2023-03-25",
            "2023-03-26",
            "2023-03-27",
            "2023-03-28",
            "2023-03-29",
            "2023-03-30",
            "2023-03-31",
            "2023-04-01",
            "2023-04-02",
            "2023-04-03",
            "2023-04-04",
            "2023-04-05",
            "2023-04-06",
            "2023-04-07",
            "2023-04-08",
            "2023-04-09",
            "2023-04-10",
            "2023-04-11",
            "2023-04-12",
          ],
        },
      ],

      yAxis: [
        {
          name: "月新增文章数",
          type: "value",
          // min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e3e3e3",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 20,
            formatter: "{value}",
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "月新增文章数",
          type: "line",
          // type: "bar",
          smooth: true, //是否平滑
          showAllSymbol: true,
          symbol: "circle",
          symbolSize: 4,
          lineStyle: {
            normal: {
              color: "#ff8800",
            },
          },
          color: "rgba(255, 120, 0, 0.7)",
          areaStyle: {
            //区域填充样式
            normal: {
              color: "rgba(255, 119, 0, 0.7)",
              shadowColor: "rgba(255, 119, 0, 0.5)",
              shadowBlur: 6,
            },
          },
          itemStyle: {
            color: "#fff",
            borderColor: "#ff8800",
            borderWidth: 3,
          },
          data: this.dataList,
        },
      ],
    });
  },
};
</script>

<style lang="less" scoped>
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header {
  border-bottom: 1px solid #eee;
}
.charts {
  width: 100%;
  height: 350px;
}
::v-deep .el-card__body {
  padding: 0;
}
</style>
